<!DOCTYPE HTML>
<html>
<head>
<title>Balancing of tables (shrinking)</title>
<style type="text/css">

table, td {
  border: none;
  margin: 0;
  padding: 0;
  border-spacing: 3px;
}

tr { height: 4em; }

td { background: black; background: currentColor; }

td, span { line-height: 1; }

span {
  display: inline-block;
  width: 50px;
}

body { width: 900px; }

</style>
</head>
<body>

<!--
    cell widths are:
    min   pref   pct
     50    150
     50     50
     50    100*
     50     50   50%

    and the table has 15px of horizontal border-spacing

    sizing to       col width total
    min             200
    min/pct         300
    min/spec        400
    pref            600

  -->

<div style="width: 100px"><table><tr>
<td style="color:aqua"><span></span>&#x200b;<span></span>&#x200b;<span></span></td>
<td style="color:yellow"><span></span></td>
<td style="color:fuchsia" width="100"><span></span></td>
<td style="color:blue" width="50%"><span></span></td>
</tr></table></div>

<div style="width: 265px"><table><tr>
<td style="color:aqua"><span></span>&#x200b;<span></span>&#x200b;<span></span></td>
<td style="color:yellow"><span></span></td>
<td style="color:fuchsia" width="100"><span></span></td>
<td style="color:blue" width="50%"><span></span></td>
</tr></table></div>

<div style="width: 315px"><table><tr>
<td style="color:aqua"><span></span>&#x200b;<span></span>&#x200b;<span></span></td>
<td style="color:yellow"><span></span></td>
<td style="color:fuchsia" width="100"><span></span></td>
<td style="color:blue" width="50%"><span></span></td>
</tr></table></div>

<div style="width: 365px"><table><tr>
<td style="color:aqua"><span></span>&#x200b;<span></span>&#x200b;<span></span></td>
<td style="color:yellow"><span></span></td>
<td style="color:fuchsia" width="100"><span></span></td>
<td style="color:blue" width="50%"><span></span></td>
</tr></table></div>

<div style="width: 415px"><table><tr>
<td style="color:aqua"><span></span>&#x200b;<span></span>&#x200b;<span></span></td>
<td style="color:yellow"><span></span></td>
<td style="color:fuchsia" width="100"><span></span></td>
<td style="color:blue" width="50%"><span></span></td>
</tr></table></div>

<div style="width: 515px"><table><tr>
<td style="color:aqua"><span></span>&#x200b;<span></span>&#x200b;<span></span></td>
<td style="color:yellow"><span></span></td>
<td style="color:fuchsia" width="100"><span></span></td>
<td style="color:blue" width="50%"><span></span></td>
</tr></table></div>

<div style="width: 700px"><table><tr>
<td style="color:aqua"><span></span>&#x200b;<span></span>&#x200b;<span></span></td>
<td style="color:yellow"><span></span></td>
<td style="color:fuchsia" width="100"><span></span></td>
<td style="color:blue" width="50%"><span></span></td>
</tr></table></div>

<table width="815"><tr>
<td style="color:aqua"><span></span>&#x200b;<span></span>&#x200b;<span></span></td>
<td style="color:yellow"><span></span></td>
<td style="color:fuchsia" width="100"><span></span></td>
<td style="color:blue" width="50%"><span></span></td>
</tr></table>

</body>
</html>
